<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="结果导入">
        <Upload
          @getFileData="getFileData"
          @clickFiling="clickFiling"
          @saveBatchExport="saveBatchExport"
          @saveExportExcal="saveExportExcal"
        />
      </el-tab-pane>
      <el-tab-pane label="结果解读" v-on:click="getFileData">
        <div style="display: flex; justify-content: space-between">
          <div style="position: relative">
            <i
              class="el-icon-d-arrow-left arrow"
              @click="switchArrow($event)"
            ></i>
            <el-card
              class="box-card"
              style="height: 100%; width: 240px"
              :style="{ display: arrowState ? 'block' : 'none' }"
            >
              <el-input
                style="font-size: 12px"
                v-model="serialInput"
                placeholder="请输入实验室编号"
                @keyup.enter.native="searchIndex"
              >
                <i
                  @click="searchIndex"
                  slot="suffix"
                  class="el-icon-search"
                  style="margin: 15px 10px 0 0"
                ></i>
              </el-input>
              <div
                v-for="(file, f) in fileDataList"
                :key="f"
                style="margin-top: 20px"
                class="text-over"
              >
                <span v-on:click="setIsopen(file, f)">
                  <i class="el-icon-arrow-right" v-if="!file.isopen"></i>
                  <i class="el-icon-arrow-down" v-else></i>
                </span>

                <span v-on:click="setIsopen(file, f)" style="cursor: pointer">{{
                  file.name
                }}</span>
                <div
                  class="infinite-list scroll-style"
                  style="overflow: auto; height: 300px"
                  v-if="file.isopen"
                >
                  <ul
                    class="list"
                    v-infinite-scroll="load"
                    infinite-scroll-disabled="disabled"
                  >
                    <li
                      v-for="(item, i) in file.response.data"
                      :key="i"
                      class="list-item"
                      @click="getAOfData($event, item)"
                    >
                      {{ item.id }}
                      <!-- <i class="el-icon-download" style="cursor: pointer" @click="patientInfoExport"></i> -->
                    </li>
                  </ul>
                </div>
              </div>
            </el-card>
          </div>

          <section :style="{ width: arrowState ? '80%' : '99%' }">
            <div class="check-result">
              <img src="@/assets/images/result-icon.png" alt="" />
              检查结果
            </div>

            <!-- 引入公共组件 BaseInfo -->
            <Base-Info
              :markStatus="true"
              :tipsInfo="tipsInfo"
              :customer="customer"
              @saveCheckResult="saveCheckResult"
              @codeMaxLength="codeMaxLength"
            ></Base-Info>
            <div class="target-result">
              <!-- 编辑框  导入上传 -->
              <!-- <div class="download">
                <el-upload
                  class="file-uploader"
                  name="file"
                  :headers="headers"
                  action="/api/system/customer/importFile"
                  :show-file-list="false"
                  :on-success="handleFileSuccess"
                >
                  <el-tooltip
                    class="item"
                    effect="light"
                    content="导入"
                    placement="bottom"
                  >
                    <div class="download-mark">
                      <img src="@/assets/images/download-icon.png" alt="" />
                    </div>
                  </el-tooltip>
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div> -->
              <!--  -->
              <div class="base-info-title">
                <div class="title-line"></div>
                指标结果
                <span
                  ><span class="asterisk">*</span>所有指标的单位均为：uM</span
                >
              </div>
              <!-- 指标查询 -->
              <div
                class="target-num"
                id="targetNums"
                :class="[isShow ? '' : 'isShow', isShow ? '' : 'scroll-style']"
              >
                <div
                  class="target-num-item"
                  v-for="(item, index) in paramsListData"
                  :key="item.itemId"
                >
                  <div class="num-item-mark">{{ item.nameEn }}</div>
                  <el-input
                    clearable
                    @clear="clearIpt(index)"
                    @keyup.enter.native="checkIll"
                    v-model.trim="searchParamsData[index]"
                    placeholder="请输入内容"
                    @blur="checkNum(searchParamsData[index], index)"
                    :class="item.borderStatus ? '' : 'borderStatus'"
                  >
                  </el-input>
                </div>
              </div>

              <div class="btns">
                <div class="more btn btn-bg" @click="changeShowStatus">
                  <img
                    src="@/assets/images/down-icon.png"
                    :class="isShow ? '' : 'isRotate'"
                  />
                  {{ isShow ? "展开" : "收起" }}
                </div>
                <div class="replace">
                  <div class="btn-bg btn" @click="checkIll">查询</div>
                  <div class="btn-back btn" @click="reset">重置</div>
                </div>
              </div>
            </div>
            <div class="check-result">
              <img src="@/assets/images/explain-icon.png" alt="" />
              结果解读
            </div>
            <div class="check-result-btns">
              <div class="btn-bg btn" @click="saveCheckResult">存档</div>
              <div class="btn-back btn" @click="patientInfoExport">导出</div>
            </div>
            <!-- tab 异常指标/疾病预测 切换 -->
            <el-tabs
              id="index-tab"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="异常指标" name="first">
                <Result-Item :resultTitle="resultTitle">
                  <template>
                    <ul v-if="hasIll" class="anomaly-introduce">
                      <li v-for="(item, index) in ajaxJsonArray" :key="index">
                        <span class="order">{{ index + 1 }}</span
                        >&nbsp;&nbsp; {{ item.name }}值：<span
                          class="num-color"
                          >{{ item.value }}</span
                        >，正常范围{{ item.normalRange }}，<span
                          class="num-color"
                          >{{ item.result }}</span
                        >
                      </li>
                    </ul>
                    <ul v-else style="line-height: none">
                      <li>无</li>
                    </ul>
                  </template>
                </Result-Item>
              </el-tab-pane>
              <el-tab-pane label="疾病预测" name="second">
                <Result-Item :resultTitle="resultTitle">
                  <template v-if="ajaxJsonArray3.length">
                    <ul
                      class="disease-prediction"
                      v-for="(item, index) in ajaxJsonArray3"
                      :key="index"
                    >
                      <li>
                        <span class="title"
                          ><span class="order">{{ index + 1 }}</span
                          >.&nbsp;&nbsp;{{ item.ill }}</span
                        >
                      </li>
                      <li class="line-text--one">
                        <span class="title">相关异常指标：</span>
                        <span class="derivation">
                          {{ item.name }}
                          <span
                            class="source"
                            @click="copyTemplate('解析来源于', item.sourceData)"
                            >解析来源于</span
                          >
                          <el-popover
                            v-if="item.sourceData.length > 80"
                            placement="top-start"
                            title="解析来源于"
                            width="800"
                            trigger="hover"
                            :content="item.sourceData"
                          >
                            <span slot="reference" class="source-content">
                              {{ item.sourceData }}
                            </span>
                          </el-popover>

                          <span v-else slot="reference" class="source-content">
                            {{ item.sourceData }}
                          </span>
                        </span>
                      </li>
                      <!-- <el-popover placement="top-start" title="异常解析：" width="800" trigger="hover" :content="item.abnormalityCause"> -->
                      <li slot="reference">
                        <span
                          class="title"
                          @click="
                            copyTemplate('异常解析：', item.abnormalityCause)
                          "
                          >异常解析：</span
                        >
                        {{ item.abnormalityCause }}
                      </li>
                      <!-- </el-popover> -->
                      <!-- <el-popover placement="top-start" title="临床表现：" width="800" trigger="hover" :content="item.manifestation"> -->
                      <li slot="reference">
                        <span
                          class="title"
                          @click="
                            copyTemplate('临床表现：', item.manifestation)
                          "
                        >
                          临床表现：</span
                        >
                        {{ item.manifestation }}
                      </li>
                      <!-- </el-popover> -->

                      <!-- <li>
                            <span class="title">经典型：</span>
                            等数据……
                        </li> -->
                    </ul>
                  </template>
                  <template v-else>
                    <ul style="line-height: none">
                      <li>无</li>
                    </ul>
                  </template>
                </Result-Item>
              </el-tab-pane>
            </el-tabs>
          </section>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseInfo from "@/views/dashboard/BaseInfo";
import ResultItem from "@/views/dashboard/ResultItem";
import Upload from "@views/dashboard/upload";
import { paramsList, checkIll } from "@/api/user";
import {
  saveCheckResult,
  patientInfoExport,
  verifyByCode,
  patientInfoBatchExport,
} from "@/api/customer";
export default {
  components: {
    BaseInfo,
    ResultItem,
    Upload,
  },
  mounted() {
    const { offsetHeight } = document.querySelector("body");
    this.warpHeight = offsetHeight;
    this.fileDataList = JSON.parse(sessionStorage.getItem("fileData")) || [];
  },
  computed: {
    noMore() {
      let length = this.fileDataList.map((file, i) => {
        return file.response.data.length;
      });
      return this.count >= length[this.fileId] - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  data() {
    return {
      asyncCount: 0,
      awitCount: 10,
      // 所有下载文件id的集合
      downFileIds: [],
      warpHeight: 0,
      fileId: 0,
      // 箭头 默认打开
      arrowState: true,
      recordIds: [],
      isopen: false,
      // 文件数据
      fileData: [],
      fileDataList: [],
      fileAllData: [],
      // 加载条数
      count: 10,
      loading: false,
      // 搜索编号
      serialInput: "",
      serialCode: "",
      activeName: "first",
      resultTitle: "异常指标", //tab切换
      isShow: true, //搜索指标列表显隐
      paramsListData: [], //指标数据
      searchParamsData: [], //搜索指标数据
      hasIll: false, //指标异常标识 true，false 无异常
      ajaxJsonArray: [], //异常指标
      ajaxJsonArray3: [], //疾病预测
      headers: {
        //照片上传请求头
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
      recordId: "", //存档回显id
      source: 1, //筛查指标来源 0.导入，1.输入
      customer: {
        //患者档案存档
        realName: "",
        code: "",
        sex: "",
        age: "",
        address: "",
        familyHistory: "",
        checkTime: "",
      },
      checkIllData: [], //查询(疾病,输入指标值，获得结果)
      checkIllStatus: false, //查询指标状态
      paramsStatus: true, // 输入指标是否合法
      tipsInfo: [], // 是否编号相同，姓名/性别不同
    };
  },
  created() {
    this.paramsList();
  },
  methods: {
    loadingState(text) {
      const loading2 = this.$loading({
        lock: true,
        text: text,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return loading2;
    },
    // 获取上传数据
    getFileData(file) {
      //  file 上传页面的文件数据 需要将解压的数据存储在本地 切换其他页面返回后保持数据的更迭
      this.fileDataList = file.filter((item) => !item.delte);
      sessionStorage.setItem("fileData", JSON.stringify(this.fileDataList));
    },
    // 滚动加载 暂时禁用
    load() {
      this.loading = true;
      this.count += 10;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    // 更新状态
    setIsopen(item, f) {
      this.fileId = f;
      this.fileDataList = this.fileDataList.map((list) => {
        if (list.uid === item.uid) {
          list.isopen = !list.isopen;
          return list;
        }
        return list;
      });
      console.log(item);
    },
    /**
     * 回显数据
     * **/
    getAOfData(e, item) {
      // 当前选中的条数据状态
      const ulEle = [...document.querySelector(".list").children];
      ulEle.forEach((li) => {
        if (li === e.target) {
          li.className = "list-item list-item-active";
        } else {
          li.className = "list-item";
        }
      });
      let data = Object.keys(item.res).map((key) => ({
        name: key,
        value: item.res[key],
      }));
      // 回显导入基本数据
      this.customer = {
        code: item.id,
        sex: "",
      };
      // 回显导入指标数据
      data.forEach((item) => {
        let paramsIndex = this.paramsListData.findIndex(
          (obj) => obj.nameEn == item.name
        );
        if (paramsIndex != -1) {
          this.searchParamsData[paramsIndex] = item.value;
        }
      });
      this.checkIll();
      // console.log(data);
    },
    /**
     * 搜索指标编号
     * **/
    searchIndex() {
      if (!this.fileDataList.length) return;
      this.fileDataList = this.fileDataList.map((file) => {
        file.response.data = file.response.data.filter(
          (item) => !(item.id !== this.serialInput)
        );
        return file;
      });
      console.log(this.serialInput);
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      this.resultTitle = tab.label;
    },

    /**
     * 失焦
     */
    checkNum(value, index) {
      // console.log('失焦时候的值', this.searchParamsData[index]);

      // console.log('对比', this.searchParamsData[index].length);
      // console.log('对比222', value, this.searchParamsData[110],this.searchParamsData);

      if (value == undefined) {
        this.paramsStatus = true;
        this.paramsListData[index].borderStatus = true;
        return;
      }

      if (
        this.searchParamsData[index].length &&
        !/^\d*(\.\d{1,10})?$/.test(value)
      ) {
        this.$message.warning("请输入正确的数值");
        this.paramsStatus = false;
        this.paramsListData[index].borderStatus = false;
      } else {
        this.paramsStatus = true;
        this.paramsListData[index].borderStatus = true;
      }
    },

    /**
     * 点击由 clearable 属性生成的清空按钮时触发
     */
    clearIpt(index) {
      // 修改样式状态
      this.paramsListData[index].borderStatus = true;
      this.paramsStatus = true;
    },
    // 切换箭头 隐藏面板
    switchArrow(e) {
      e.target.className = this.arrowState
        ? "el-icon-d-arrow-right arrow"
        : "el-icon-d-arrow-left arrow";
      this.arrowState = !this.arrowState;
    },
    /**
     * 搜索列表显隐
     */
    changeShowStatus() {
      // 滚轮置顶
      document.getElementById("targetNums").scrollTop = 0;
      this.isShow = !this.isShow;
    },

    /**
     * 获取指标列表
     */
    async paramsList() {
      const res = await paramsList();
      console.log("获取指标列表", res);
      if (res.code != 200) return;
      this.paramsListData = res.items.map((item) => ({
        ...item,
        borderStatus: true,
      }));
    },

    /**
     * 样本变化超过16位
     */
    codeMaxLength() {
      console.log("样本变化超过16位", this.customer);
      this.customer = {
        ...this.customer,
        code: this.customer.code.substr(0, 16),
      };
    },

    /**
     * 导出
     */
    async patientInfoExport() {
      console.log("导出id", this.recordId, this.serialCode);
      if (this.recordId == "") {
        this.$message.warning("请先进行存档操作~");
      } else {
        await patientInfoExport(this.recordId, this.serialCode);
      }
    },
    /**
     * 文件上传页面点击存档后，数据展示页面通过$emit 将上传页面的数据获取
     * **/
    clickFiling(fileData) {
      console.log(fileData);
      this.fileAllData = fileData; //所有的文件
      //  存档前清空需下载的文件id集合
      this.downFileIds = [];

      // fileData.map((files) => {
      //   files.response.data.map((item) => {
      //     this.analyticalData(item, files);
      //     // if (this.recordIds.length === files.length) {
      //     //   console.log(this.recordIds.length, files.length);
      //     // }
      //   });
      // });

      // fileData.map((item, index) => {
      //   console.log("文件", index);
      //   this.files(item.response.data);
      // });
      // fileData.map(item => {this.files(item);})
      for (let index = 0; index < fileData.length; index++) {
        this.files(fileData[index]);
      }
    },
    async files(files) {
      this.loadingState(`存档中`);
      let collect = files.response.data.map((item, i) => {
        let data = Object.keys(item.res).map((key) => ({
          name: key,
          value: item.res[key],
        }));
        // await checkIll(data)
        return {
          customer: {
            code: item.id,
            sex: 2,
          },
          data: data,
          source: 0,
        };
      });
      let result = collect;
      //TODO
      //执行后续操做
      //  为减少服务器压力 分批次请求数据 一次最多请求10条
      console.log(result);
      if (this.awitCount >= result.length) {
        let res = await saveCheckResult(result);
        this.downFileIds.push({
          recordIds: res.recordId,
          name: files.name,
          uid: files.uid,
        });
      } else {
        let count = Math.ceil(result.length / 10);
        let recordIds = [];
        for (let index = 0; index < count; index++) {
          this.asyncCount = 10 * index;
          this.awitCount = 10 * (index+1);
          let loadMore = result.slice(this.asyncCount, this.awitCount);
          console.log("loadMore", loadMore, index);
          console.log(
            "asyncCount",
            this.asyncCount,
            "awitCount",
            this.awitCount
          );
          await saveCheckResult(loadMore).then((res) => {
            recordIds.push(...res.recordId);
            // console.log(recordIds.length, result.length);

          });
        }

        this.downFileIds.push({
          recordIds: recordIds,
          name: files.name,
          uid: files.uid,
        });
      }
      this.asyncCount = 0;
      this.awitCount = 10;
      console.log(this.downFileIds);
      // this.downFileIds.push({
      //  recordIds: res.recordId,
      //  name: files.name,
      //  uid: files.uid
      // });
      // console.log(this.downFileIds.length, this.fileAllData.length);
      if (this.fileAllData.length === this.downFileIds.length) {
        this.loadingState().close();
        this.$message.success("存档成功");
      }

    
    },
    /**
     * 解析方式改为 每个文件单独导出
     * **/
    // 解析每条数据
    async analyticalData(item, file) {
      let data = Object.keys(item.res).map((key) => ({
        name: key,
        value: item.res[key],
      }));

      // 回显导入指标数据
      // data.forEach((item) => {
      //   let paramsIndex = this.paramsListData.findIndex(
      //     (obj) => obj.nameEn == item.name
      //   );
      //   if (paramsIndex != -1) {
      //     this.searchParamsData[paramsIndex] = item.value;
      //   }
      // });
      // this.loadingState("存档中");
      // this.saveDataIds(item, data, file);
      // 指标查询
      // await checkIll(data);
      // 验证信息
      // await verifyByCode({
      //   customer: {
      //     code: item.id,
      //     sex: 2, // 修改“男” 为0，“女”为1  未知为2
      //   },
      // });

      let res = await saveCheckResult({
        customer: {
          code: item.id,
          sex: 2, // 修改“男” 为0，“女”为1  未知为2
        },
        data: data,
        source: 0,
      });

      this.recordIds.push(res.recordId);

      console.log(this.recordIds.length, file.length);
      if (this.recordIds.length === file.length) {
        // this.saveBatchExport()
        this.downFileIds.push({
          recordIds: this.recordIds,
          name: file.name,
          uid: file.uid,
        });
        console.log("下载的文件", this.downFileIds);
        this.recordIds = [];
        if (this.downFileIds.length === this.fileAllData.length) {
          this.loadingState().close();
          this.$message.success("存档完成");
        }
      }
    },

    async saveDataIds(item, data, file) {
      // 指标查询
      // await checkIll(data);
      // // 验证信息
      // // await verifyByCode({
      // //   customer: {
      // //     code: item.id,
      // //     sex: 2, // 修改“男” 为0，“女”为1  未知为2
      // //   },
      // // });

      let res = await saveCheckResult({
        customer: {
          code: item.id,
          sex: 2, // 修改“男” 为0，“女”为1  未知为2
        },
        data: data,
        source: 0,
      });

      this.recordIds.push(res.recordId);
      console.log(this.recordIds.length, file.response.data.length);
      if (this.recordIds.length === file.response.data.length) {
        // this.saveBatchExport()
        this.downFileIds.push({
          recordIds: this.recordIds,
          name: file.name,
          uid: file.uid,
        });
        console.log("下载的文件", this.downFileIds);
        this.recordIds = [];
        if (this.downFileIds.length === this.fileAllData.length) {
          this.loadingState().close();
          this.$message.success("存档完成");
        }
      }
    },
    // 存档后，批量导出
    // 将获取存档的下载文件数据与勾选的文件进行对比 若id相同进行下载
    saveExportExcal(saveFile) {
      console.log(saveFile);
      const Ids = saveFile.map((save) => save.id);
      // console.log(this.downFileIds);
      if (
        saveFile.length !== this.downFileIds.length &&
        saveFile.length > this.downFileIds.length
      ) {
        this.$message.warning("有未存档的文件~");
        return;
      }
      this.downFileIds.map((down) => {
        if (Ids.includes(down.uid)) {
          this.saveBatchExport(down);
        }
      });
    },
    async saveBatchExport(down) {
      // if (!this.recordIds.length) {
      //   this.$message.warning("请先存档");
      //   return;
      // }
      this.loadingState("导出中");
      let res = await patientInfoBatchExport(down);
      if (!res) {
        this.loadingState().close();
      }
    },
    /**
     * 存档（手动录入）
     */
    async saveCheckResult() {
      // let status = true; //基础信息是否为空
      // for (const key in this.customer) {
      //     if ((key != 'familyHistory') && (key != 'address') && (key != 'checkTime')) {
      //         if (!this.customer[key]) {
      //             console.log(2222222222222, this.customer[key], key);

      //             status = false;
      //             break;
      //         }
      //     }
      // }
      // 信息不能为空
      // console.log("信息不能为空", status, this.searchParamsData);
      console.log("信息不能为空", this.searchParamsData);
      console.log(this.customer);
      if (!this.customer.code) {
        this.$message.warning("信息不能为空");
        return;
      }
      // 指标不能为空
      // console.log(
      //   "指标不能为空",
      //   this.searchParamsData.filter((item) => item)
      // );
      if (
        !this.searchParamsData.filter((item) =>
          item.toString().replace(/\s/g, "")
        ).length
      ) {
        this.$message.warning("指标不能为空");
        return;
      }
      // 是否查询了指标
      if (!this.checkIllStatus) {
        this.$message.warning("请查询指标后存档");
        return;
      }

      const result = await verifyByCode({
        customer: {
          ...this.customer,
          sex: this.customer.sex ? (this.customer.sex == "男" ? 0 : 1) : 2, // 修改“男” 为0，“女”为1  未知为2
        },
      });
      console.log("验证客户信息", result);

      if (result.code != 200) return;

      // 清空上一次记录信息
      this.tipsInfo = [];

      if (!result.realNameSame) {
        this.tipsInfo.push("姓名");
      } else {
        this.tipsInfo.push("");
      }

      if (!result.sexSame) {
        this.tipsInfo.push("性别");
      } else {
        this.tipsInfo.push("");
      }

      // 编号相同，姓名不同
      if (this.tipsInfo.filter((item) => item).length) {
        this.$confirm(
          `<span><span style="font-size:18px;color:#8775ff">是否继续存档？</span><br>样本编号为${
            this.customer.code
          }的${this.tipsInfo.join("")}与档案不符，请核实重新录入！</span>`,
          "提示",
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.sureSaveCheckResult();
          })
          .catch(() => {
            console.log("用户取消");
          });
      } else {
        this.sureSaveCheckResult();
      }
    },

    /**
     * 确认存档操作
     */
    async sureSaveCheckResult() {
      const res = await saveCheckResult([
        {
          customer: {
            ...this.customer,
            sex: this.customer.sex ? (this.customer.sex == "男" ? 0 : 1) : 2, // 修改“男” 为0，“女”为1  未知为2
          },
          data: this.checkIllData,
          source: this.source,
        },
      ]);
      if (res.code == 200) this.$message.success("存档成功！");
      this.serialCode = this.customer.code;
      //存档成功修改查询状态
      this.checkIllStatus = false;
      this.recordId = res.recordId;
      this.tipsInfo = [];
      console.log("存档（手动录入）", res);
    },

    /**
     * 导入病例成功
     */
    async handleFileSuccess(row, file) {
      console.log("导入病例结果", file);
      if (file.response.code != 200) return;
      this.source = 0;
      this.$message.success("导入成功~");
      // 回显导入基本数据
      console.log(this.customer);
      this.customer = {
        ...file.response.customer,
        // sex: file.response.customer.sexCn,
      };
      // this.
      // 回显导入指标数据
      file.response.data.forEach((item) => {
        let paramsIndex = this.paramsListData.findIndex(
          (obj) => obj.nameEn == item.name
        );
        if (paramsIndex != -1) {
          this.searchParamsData[paramsIndex] = item.value;
        }
      });
    },

    /**
     * 查询指标列表
     */
    async checkIll() {
      // 清空上一次查询结果数据
      this.ajaxJsonArray = [];
      this.ajaxJsonArray3 = [];

      // console.log('结果',this.checkIllFn());
      if (this.checkIllFn()) return;

      // 指标状态不合法 不进行查询
      if (!this.paramsStatus) {
        this.$message.warning("请输入正确的数值");
        return;
      }
      const res = await checkIll(this.checkIllData);
      this.checkIllStatus = true;
      // console.log("搜索结果", res);
      if (res.code != 200) return;
      // 赋值数据
      this.hasIll = res.hasIll;

      // 没有疾病，弹窗提示
      if (!res.hasIll) {
        // this.$message.warning("无异常指标解读");
        return;
      }
      // 处理异常指标详情
      res.ajaxJsonArray.forEach((obj) => {
        if (obj.resultJsonArray.length) {
          obj.resultJsonArray.forEach((obj1) => {
            // 判断是否有重复
            if (
              !this.ajaxJsonArray.filter((item) => {
                return item.nameEn == obj1.nameEn;
              }).length
            ) {
              this.ajaxJsonArray.push(obj1);
            }
          });
        }
      });

      this.ajaxJsonArray3 = res.ajaxJsonArray3;

      this.$nextTick(() => {
        let section = document.querySelector(".app-main");
        section.scrollTop =
          document.querySelectorAll(".check-result")[1].offsetTop + 60;
      });
    },

    /**
     * 搜索的数据 转为数组对象
     */
    checkIllFn() {
      // 指标不能为空
      // console.log("指标不能为空", this.searchParamsData);
      if (!this.searchParamsData.filter((item) => item).length) {
        this.$message.warning("指标不能为空");
        return true;
      }

      //  if (value == undefined || value == '' || !value.length) {
      //     this.paramsStatus = true;
      //     this.paramsListData[index].borderStatus = true;
      //     return
      // }

      // let arrStatus = false;  //是否存在不合法数组

      let arrStatus = this.searchParamsData.some(
        (item) => item.length && !/^\d*(\.\d{1,10})?$/.test(item)
      );

      if (arrStatus) {
        this.$message.warning("请输入正确的数值");
        return true;
      }

      // if ((this.searchParamsData.filter(item =>!value|| !Number(item)).length)) {
      //     this.$message.warning('请输入正确的数值');
      //     return true
      // }

      // console.log('11111111111', searchParamStatus);
      this.checkIllData = [];
      this.searchParamsData.forEach((value, index) => {
        if (value) {
          this.checkIllData.push({
            name: this.paramsListData[index].nameEn,
            value: value,
          });
        }
      });
    },

    /**
     * 重置指标列表
     */
    reset() {
      this.searchParamsData = [];
      this.paramsListData = this.paramsListData.map((item) => ({
        ...item,
        borderStatus: true,
      }));
      this.ajaxJsonArray = []; //异常指标
      this.ajaxJsonArray3 = []; //疾病预测
      this.hasIll = false; //指标异常标识 true，false 无异常
    },

    /**
     * 复制模板内容
     */
    copyTemplate(tips, value) {
      this.copyToClipboard(value); // 需要复制的文本内容
      this.$message.success(tips + "复制成功");
    },

    /**
     * 点击复制到剪贴板函数
     */

    copyToClipboard(content) {
      //window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，
      //提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
      if (window.clipboardData) {
        /*
          window.clipboardData有三个方法:
        setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
          */
        window.clipboardData.setData("text", content);
      } else {
        (function (content) {
          //oncopy 事件在用户拷贝元素上的内容时触发。
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault(); //取消事件的默认动作
            document.oncopy = null;
          };
        })(content);
        //execCommand方法是执行一个对当前文档/当前选择/给出范围的命令。
        //'Copy':将当前选中区复制到剪贴板。
        document.execCommand("Copy");
      }
    },

    /**
     * 存档编号相同，姓名或性别不同
     */
    open() {},
  },
};
</script>

<style lang="scss"></style>
<style lang="scss" scoped>
.file-uploader {
  .el-upload {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: red;
  }
}

.isShow {
  height: 500px !important;
  overflow: auto !important;
}

.isRotate {
  transform: rotate(180deg) !important;
}

.target-result {
  box-sizing: border-box;
  padding: 18px 0 50px 30px;
  overflow: hidden;
  background: #fff;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-bottom: 27px;

  .download {
    display: flex;
    height: 50px;
    overflow: hidden;
    justify-content: flex-end;
    margin-right: 43px;

    // .item {

    .download-mark {
      width: 49px;
      height: 49px;
      border-radius: 50%;
      background-color: #8775ff;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    // }
  }

  .base-info-title {
    font-size: 16px;
    color: #3c3978;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: fit-content;

    .title-line {
      width: 3px;
      height: 14px;
      background-color: #e984ca;
      border-radius: 1px;
      margin-right: 6px;
      margin-top: -4px;
    }

    span {
      font-size: 12px;
      color: #8775ff;

      .asterisk {
        color: #ff0000;
        margin-left: 10px;
      }
    }
  }

  .target-num {
    display: flex;
    margin-bottom: 30px;
    flex-wrap: wrap;
    height: 80px;
    overflow: hidden;

    .target-num-item {
      flex: none;

      .num-item-mark {
        font-size: 16px;
        color: #3c3978;
        line-height: 40px;
      }

      .el-input {
        width: 180px;
        margin-right: 49px;
      }
    }
  }

  .btns {
    display: flex;
    justify-content: space-between;
    margin-right: 43px;

    .more {
      color: #fff;

      img {
        margin: 3px 0 2px 0;
      }
    }

    .replace {
      display: flex;
    }
  }
}

.el-tabs {
  background: #fff;
}
::v-deep .el-tabs--border-card > .el-tabs__header {
  margin-bottom: 20px;
  background-color: #f5f7fb !important;
  border: none;
  .is-active {
    color: #fff !important;
    background: #8775ff;
  }
  .el-tabs__item {
    // background-color: #8775ff;
    // color: #fff !important;
    height: 40px;
    width: 108px;
    border-radius: 4px;
    border: none;
    margin-right: 20px;
  }
}
.infinite-list {
  .list {
    .list-item {
      margin-top: 10px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      cursor: default;
    }
  }
}
.list-item-active {
  background-color: #e984ca;
  color: #fff;
}

.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arrow {
  width: 30px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  color: #8775ff;
  // background-color: #f5f7fb;
  font-size: 20px;
  position: absolute;
  left: -24px;
  top: 0;
  z-index: 5;
}
</style>
